<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>超级英雄的精彩语录</title>
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" href="./css/main.css">
	<link href="https://fonts.googleapis.com/css?family=Hind:400,600|Open+Sans:300,600" rel="stylesheet">
	<link rel="stylesheet" href="./css/sortable.min.css">
	<link rel="shortcut icon" href="./favicon/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="./css/public.css">
	<script type="text/javascript" src="./js/sortable.min.js"></script>
	<script src="./jq/jquery.min.js"></script>
	<script src="./js/public.js"></script>
	<style>
		h2 {
			text-align: center;
		}
	</style>
</head>

<body>
	<div class="htmleaf-container">
		<main class="sortable">
			<div class="container">
				<div class="wrapper">
					<ul class="sortable__nav nav">
						<li>
							<a data-sjslink="all" class="nav__link">
								全部英雄
							</a>
						</li>
						<li>
							<a data-sjslink="flatty" class="nav__link">
								钢铁侠
							</a>
						</li>
						<li>
							<a data-sjslink="funny" class="nav__link">
								美国队长
							</a>
						</li>
						<li>
							<a class="nav__link" style="cursor:unset">
								更多详细内容后续持续更新...
							</a>
						</li>
					</ul>
					<div id="sortable" class="sjs-default">
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="./img/hgtx1.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">钢铁侠</h2>
									<p class="card__text">
										“Failure is the fog through which we glimpse triumph.”
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="funny">
							<div class="card">
								<img class="card__picture" src="./img/hmd1.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">美国队长</h2>
									<p class="card__text">
										“You just don't know when to give up,do you.I can do this all day.”
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="./img/hgtx2.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">钢铁侠</h2>
									<p class="card__text">
										“做一件事 开始时 不带目的 满怀热情”
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="./img/hgtx3.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">钢铁侠</h2>
									<p class="card__text">
										“Then come the mistakes.”
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="funny">
							<div class="card">
								<img class="card__picture" src="./img/hmd2.jpg" alt=""
									style="background-position: top left;">
								<div class="card-infos">
									<h2 class="card__title">美国队长</h2>
									<p class="card__text">
										“不论这个世界怎么变，我永远选择做良心”
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="./img/hgtx4.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">钢铁侠</h2>
									<p class="card__text">
										“我们创造自己的魔鬼?”
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="funny">
							<div class="card">
								<img class="card__picture" src="./img/hmd3.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">美国队长</h2>
									<p class="card__text">
										“If you do this,none of your past isgonna remain hidden.Are you sure you’re
										ready for the world to see you as youreally are?”
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="./img/hgtx5.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">钢铁侠</h2>
									<p class="card__text">
										“很多词能形容我怀旧可不再其中”
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="funny">
							<div class="card">
								<img class="card__picture" src="./img/hmd4.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">美国队</h2>
									<p class="card__text">
										“我会一直陪你到最后的，哥们儿”
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="./img/hgtx6.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">钢铁侠</h2>
									<p class="card__text">
										“辉煌过后终将落幕”
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="funny">
							<div class="card">
								<img class="card__picture" src="./img/hmd5.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">美国队长</h2>
									<p class="card__text">
										“世界已经变了，我们都回不到过去，只能适应现在，有时我们能做的最好的事，是重新开始”
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="funny">
							<div class="card">
								<img class="card__picture" src="./img/hmd6.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">美国队长</h2>
									<p class="card__text">
										“First rule of going on the run is don’trun,walk.If I run in these shoes,they’re
										gonna fall off.”
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</main>
	</div>
	<div class="backhome">
		<a href="./index.html">回到主页</a>
	</div>
	<div class="backtop">
		返回顶部
	</div>
	<script type="text/javascript">
		document.querySelector('#sortable').sortablejs()
	</script>
</body>

</html>